<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            #firstScissorHalf {
                  offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
            }

            #secondScissorHalf {
                  offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
            }

            .aaa {
                  width: 120px;
                  height: 120px;
            }
      </style>
</head>

<body>

      <div class="aaa">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="350 0 1400 900">
                  <rect x="595" y="423" width="610" height="377" fill="blue" />
                  <polygon points="506,423 900,190 1294,423" fill="yellow" />
                  <polygon points="993,245 993,190 1086,190 1086,300" fill="red" />
                  <path id="house"
                        d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
                        fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />
                  <path id="firstScissorHalf"
                        d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
                        transform="translate(0,0)" fill="green" stroke="black" stroke-width="5" stroke-linejoin="round"
                        stroke-linecap="round" fill-rule="evenodd" />
                  <path id="secondScissorHalf"
                        d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
                        transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5"
                        stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" />
            </svg>
      </div>
      <h1 id="h1Txt"></h1>
      <script type="text/javascript">
            document.querySelector("#h1Txt").innerHTML = window.screen.width + '*' + window.screen.height;
      </script>
</body>

</html>